<template>
    <div class="my-block">
        <div class="block-title"><div class="left"><div class="before" v-if="showBefore"></div>{{title}}</div><div class="more"><slot name="more"><span v-if="$listeners.more" @click="toMore">查看更多></span></slot></div></div>
        <div class="block-content">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    export default {
        name:"MyBlock",
        props:{
            title:{
                type:String,
                default:""
            },
            showBefore:{
                type:Boolean,
                default:true
            },
        },
        methods:{
            toMore(){
                this.$emit("more")
            }
        }
    }
</script>
<style lang="scss" scoped>
.my-block{
    background: #ffffff;
    position: relative;
    .block-title{
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .more{
            color: #666666;
            cursor: pointer;
            font-size: 12px;
        }
        .left{
            display: flex;
            font-weight: 600;
        }
        .before{
            width: 3px;
            background:var(--theme);
            display: block;
            height: 16px;
            margin-right: 5px;
        }
    }
    .block-content{
        border-top: 1px solid #dadada;
        padding: 15px;
    }
}
</style>
